<template>
	<div class="bind-form" v-if="showBindForm">
		<el-dialog title="绑定表单" :visible.sync="showBindForm" width="50%" :before-close="cancelBindForm">
			<Table :tableData="formTableData" ref="tableEle" :tableSelections="formTableData.checkData.formIds" @changeSelect="changeSelect" @currentChange="currentChange">
				<template v-slot:btn>
					<el-table-column width="180px" align="center" fixed="right" label="操作">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" :disabled="!scope.row.fields" @click="viewForm(scope.$index, scope.row)">查看</el-button>
						</template>
					</el-table-column>
				</template>
			</Table>
			<br />
			<PageSize :pages="formTableData.checkData" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage"></PageSize>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelBindForm">取 消</el-button>
				<el-button type="primary" @click="getBindForm">确 定</el-button>
			</span>
			<el-dialog class="form-wrapper" title="查看表单" :visible.sync="viewFormTips" width="50%" :before-close="cancelViewForm" append-to-body>
				<iframe v-if="viewFormTips" allowTransparency="true" class="iframelink" width="100%" height="100%" :src="formRemotelinkurl"></iframe>
			</el-dialog>
		</el-dialog>
	</div>
</template>

<script>
import Table from '../components/Table.vue';
import PageSize from '../components/PageSize.vue';

export default {
	components: {
		Table,
		PageSize
	},
	props: {
		showBindForm: {
			type: Boolean,
			defualt: () => false
		},
		formTableData: {
			type: Object,
			defualt: () => {}
		}
	},
	data() {
		return {
			viewFormTips: false,
			formRemotelinkurl: '' //表单预览地址
		};
	},

	methods: {
		viewForm(index, row) {
			console.log('viewForm', index, row);
			if (row.fields && row.fields.schema && row.fields.title) {
				this.formRemotelinkurl = `${formUrl}/?id=${row.id}&token=${localStorage.getItem(`zco_admin_token_${window.uid}`)}&url=${loginUrl}&template=1&hash=${new Date().getTime()}`;
			}

			this.viewFormTips = true;
		},
		changePageSize(val) {
			this.$emit('changeBindFormPageSize', val);
		},
		changeCurrentPage(val) {
			this.$emit('changeBindFormPage', val);
		},
		cancelBindForm() {
			this.$emit('cancelBindForm');
		},
		getBindForm() {
			this.$emit('getBindForm');
		},
		changeSelect(form, row) {
			console.log(form);
			this.$emit('changeSelect', form, row);
		},
		currentChange(form) {
			console.log(form);
			this.$emit('currentChange', form);
		},
		cancelViewForm() {
			this.viewFormTips = false;
		}
	}
};
</script>

<style lang="less" scoped>
.btn {
	text-align: right;
}
.iframelink {
	width: 100%;
	height: 100%;
	min-height: 600px;
}

.scroll-wrapper {
	overflow: hidden;
	width: 100%;
	height: 100%;
}
</style>
